One problem encountered by online merchants is the ability to present large numbers (thousands, tens of thousands, or millions) of products. A typical online interface, such as that used by Amazon, eBay, or Yahoo Shopping, requires the user to page through large numbers of distinct web pages in order to browse the products in an online product catalog. This process is slow, frustrating, and fails to leverage the visual and spatial cognitive abilities of the user.
There are thousands of online stores. Many of these stores have large catalogs of products. Using most store websites it is very time consuming for a shopper to view more than a few dozen products. This is unlike physical stores where a shopper can walk through a department or scan through a rack in a few minutes and see many items. It is also unlike catalog shopping where a shopper can flip through the pages very quickly and in a small number of minutes see most of the offerings of a store.
Each online merchant has created a catalog of products. The larger merchants have created catalogs that contain thousands to millions of products. The products are presented to the shopper on web pages. The products are usually organized into pages by category and/or brand. For each page the store presents images and information about a small number of products (typically twelve to 24). To see more items, the shopper clicks a button on the web page and gets another page with the same number of products. To see a large number of products can take dozens of page loads and a significant amount of time.
Spatial layout of images has been used in the interfaces for viewing the set of files on an operating system. In the Macintosh Finder and the Windows Explorer, computer system files are manipulated as icons using a “desktop metaphor”: a computer system file is presented at a particular location in a two-dimensional space, the way that physical files are placed at a spot on a physical desk. While computer system files don't have an intrinsic spatial location, the icons that represent them do. Similarly, although products in an online catalog do not a have a physical position, the images for these products can be arranged in two dimensions.
When an image or arrangement of images is larger than the computer screen some technique must be used to allow the user to select which parts of the image to view. Scroll bars are one approach that has been used by many software programs. Scroll bars work well for viewing documents, but other techniques have been developed for viewing graphical representations. A pan gesture with the mouse is often a more convenient way to change the region of an image being viewed. The pan gesture has been used in Computer Aided Design (CAD) programs for many years, to view diagrams of circuits, buildings and mechanical systems.
CAD programs also have gestures for zooming in and out on the diagram. These gestures cause the display to be scaled, causing the presentation of the objects being displayed to become smaller or larger.
Until Dynamic HTML was introduced and supported by most browsers, when a user interacted with a web page, the only way for the page to react to a user gesture and significantly change what was displayed was to reload the whole web page. That action would take a second or more and was visually disruptive. Using Dynamic HTML combined with client scripting via Javascript, a web page can react to user gestures, load small amounts of information from the server and update portions of the web page. This interactivity makes it possible to smoothly pan and zoom in a browser through a two-dimensional display.